import {Carousel} from 'antd-mobile';
import {connect} from 'react-redux'
import { Component } from 'react'
import { NoData } from '../NoData'
import { userComment } from '../../store/actions'
import { dateFormat, evaluateLv, cutString, rnd }  from '../../utils'
import styles from './HotReview.module.scss';

class HotReview extends Component{
  constructor(props) {
    super(props)
  }
  UNSAFE_componentWillMount() {
    this.setFun ? clearTimeout(this.setFun) : ''
  }
  textChange(num) {
    let pageNum = rnd(0, 13);
    if (num === 1) {
      this.setFun = setTimeout(() => {
        this.props.userComment({
          isServer: false, id: 0, type: 1, commentType: 4,
          currentPage: pageNum, displayCount: 8
        })
      }, 4000)
    }
  }
  newData() {
    const { indexUserComment } = this.props
    if (indexUserComment === null || indexUserComment === undefined) {
      return [];
    }
    const list = indexUserComment.rows;
    if (list.length === 0) {
      return [];
    }
    const len = list.length;
    const size = 4;
    const arrNum = Math.ceil(len / size);
    let newArr = [];
    for (let x = 0; x < Math.ceil(len / size); x++) {
          const start = x * size;
          const end = start + size;
          newArr.push(list.slice(start, end));
    }
    return newArr
  }
  render() {
    return (
      <section className={styles["hot-review-box"]}>
        <div className={styles["title"]}>今日热评推荐</div>
        {
          this.newData().length === 0 ? <NoData /> : (
            <Carousel dots={false} autoplay={true} 
              infinite={true} afterChange={(number) => this.textChange(number)}
              frameOverflow='visible' autoplayInterval={5000}>
              {
                this.newData().map((item, index) => {
                  return (
                    <div className={styles["sttt"]} key={`sttt-${index}`}>
                      {
                        item.map((item, index) => {
                          return (
                            <div className={styles["review-box"]} key={`${index}-userComment`}>
                              <div className={styles["review-detail"]}>
                                <div className={styles["word"]}><p>{cutString(item.comment, 40)}</p></div>
                                <div className={styles["level-star"]}>
                                  <div className={`${styles['level']} ${styles[evaluateLv(item.probability).color]}`}>{evaluateLv(item.probability).text}</div>
                                  <div className={styles["star-box"]}>
                                    <span className={styles["star"]}><img src={evaluateLv(item.probability).icon}/></span>
                                  </div>
                                </div>
                                <div className={styles["time-name"]}>
                                  <div className={styles["time"]}>{dateFormat(item.commentDate)}</div>
                                  <div className={styles["name"]}>{item.fdName}</div>
                                </div>
                              </div>
                            </div>
                          )
                        })
                      }
                    </div>
                  )
                })
              }
            </Carousel>
          )
        }
      </section>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    indexUserComment: state.indexUserComment
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    userComment: (data) => dispatch(userComment(data))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(HotReview)

